<template>
	<view>
		<!-- 参考链接：
		https://uniapp.dcloud.net.cn/component/canvas.html
		https://uniapp.dcloud.net.cn/api/canvas/CanvasContext.html
		 -->

		<!-- 保存canvas到图片参考链接：https://uniapp.dcloud.net.cn/api/canvas/canvasToTempFilePath.html -->

		<button @click="share">share</button>
		<canvas style="width: 500px; height: 210px;background-color: green;" canvas-id="firstCanvas"
			id="firstCanvas"></canvas>

		<canvas style="width: 500px; height: 210px;background-color: blue;margin-top: 10px;" canvas-id="firstCanvas1"
			id="firstCanvas1"></canvas>

<!-- 绘制圆角图片（也可通过云端图片链接追加圆角参数）：https://blog.csdn.net/weixin_43222302/article/details/100697356 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},

		onReady() {
			this.drawCanvas1()
			this.drawCanvas2()
		},
		methods: {
			drawCanvas1() {
				var context = uni.createCanvasContext('firstCanvas')
				context.setStrokeStyle("#00ff00")
				context.setLineWidth(5)
				context.rect(0, 0, 200, 200)
				context.stroke()
				context.setStrokeStyle("#ff0000")
				context.setLineWidth(2)
				context.moveTo(160, 100)
				context.arc(100, 100, 60, 0, 2 * Math.PI, true)
				context.moveTo(140, 100)
				context.arc(100, 100, 40, 0, Math.PI, false)
				context.moveTo(85, 80)
				context.arc(80, 80, 5, 0, 2 * Math.PI, true)
				context.moveTo(125, 80)
				context.arc(120, 80, 5, 0, 2 * Math.PI, true)
				context.stroke()


				let text = "哈哈哈哈哈"
				context.setFontSize(20)
				let width = context.measureText(text).width
				let height = context.measureText("正").width
				console.log("text width:", JSON.stringify(width))
				console.log("height:", JSON.stringify(height))
				context.setFillStyle("#ff0000")
				context.setTextBaseline("top")
				context.setLineWidth(2)
				context.strokeRect(0, 0, width + 10 + 10, height + 10 + 10)
				context.stroke()
				context.fillText(text, 10, 10)


				context.draw()
			},

			drawCanvas2() {
				var context = uni.createCanvasContext("firstCanvas1")
				let image1 = ""
				let image2 = ""
				uni.downloadFile({
					url: "http://192.168.1.111:5173/static/logo.png"
				}).then((res) => {
					console.log("res:", JSON.stringify(res))
					image1 = res.tempFilePath
					// context.drawImage(res.tempFilePath, 0, 0)
					return uni.getImageInfo({
						src: image1
					})
				}).then((imgInfo) => {
					console.log("second res:", JSON.stringify(imgInfo))
					//图片路径、图片起始x偏移量、图片起始y偏移量、绘制的图片宽度、绘制的图片高度、绘制在屏幕上的x偏移量、绘制在屏幕上的y偏移量、绘制在屏幕上的宽度、绘制在屏幕上的高度
					context.drawImage(image1, 0, 0, imgInfo.width, imgInfo.height, 0, 0, 30, 30)

					return uni.downloadFile({
						url: "http://192.168.1.111:5173/static/prize.png"
					})
				}).then((res) => {
					image2 = res.tempFilePath
					return uni.getImageInfo({
						src: res.tempFilePath
					})
				}).then((imgInfo) => {
					context.drawImage(image2, 0, 0, imgInfo.width, imgInfo.height, 0, 50, 30, 30)
					context.draw()
				}).catch((error) => {
					//绘制失败可弹出气泡提示
					console.log("catch error:", JSON.stringify(error))
				})

			},
			share() {
				let imagePath = ""
				uni.canvasToTempFilePath({
				  x: 0,
				  y: 0,
				  width: 500,
				  height: 200,
				  destWidth: 500,
				  destHeight: 200,
				  canvasId: 'firstCanvas',
				  success: function(res) {
				    // 在H5平台下，tempFilePath 为 base64
				    console.log(res.tempFilePath)
					imagePath = res.tempFilePath
					//app中调用系统分享：https://uniapp.dcloud.net.cn/api/plugins/share.html#sharewithsystem
					uni.shareWithSystem({
						type: "image",
						summary: '补充文字',
						href: 'https://www.baidu.com/',
						imageUrl: imagePath,
						// imageUrl:"../../static/logo.png",
						success() {
							console.log('分享成功');
							// 分享完成，请注意此时不一定是成功分享
						},
						fail() {
							console.log('分享失败');
							// 分享失败  
						}
					})
				  }
				})
					
					
				
				
				//使用接入的平台sdk分享
				// if(navigator.share) {
				// 	uni.share({
						
				// 	})
				// } else {
				// 	uni.showToast({
				// 		title: "不支持分享"
				// 	})
				// }
			}
		}
	}
</script>

<style>

</style>